<template>
  <!-- 租户管理 -->
  <div>
    <!-- 折叠栏，自定义表格控件，自定义布局控件 -->
    <!-- 搜索框-->
    <div>
      <searchComponents :searchData="searchData" @searchCallBack="searchCallBack"></searchComponents>
      <div class="right_row">
        <el-button class="hunt_sunS_F" type="primary" size="mini" @click="sunS_F" plain>搜索</el-button>
        <!--添加和批量删除组件-->
        <!-- <buttonhurdle
                class="buttonhurdle"
                :diaDataAdd="searchData"
                @toAdd="toAdd"
                @toDelete="toDelete"
        ></buttonhurdle>-->
      </div>
    </div>

    <div class="out">
      <!--      <div v-show="(switchForLa.draggable||switchForLa.resizable)">{{testLayout[0].i}}</div>-->
      <!--数据列表-->
      <el-table
        ref="multipleTable"
        :data="dataAttribute"
        v-loading.body="false"
        border
        fit
        highlight-current-row
        size="mini"
        :cell-style="{padding:'5px 0'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="55"></el-table-column>
        <el-table-column
          align="center"
          v-for="item in searchModelData"
          :key="item.id"
          :label="item.CN"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{scope.row[item.EN]}}</template>
        </el-table-column>
        <el-table-column align="center" width="160" label="操作">
          <template slot-scope="scope">
            <!-- examine -->
            <el-button
              style="color:#0B9AC3;border:none;"
              icon="el-icon-view"
              circle
              @click="makeExaId(scope.row)"
            ></el-button>

            <modificationi
              class="inline_block"
              :attributeOrder="searchData"
              :modData="scope.row"

              :td="TD"
              @modifyData="modifyData"
              @click.native="FBUI(scope.row)"
            ></modificationi>

            <el-button
              style="color:#C90010;border:none;"
              icon="el-icon-delete"
              circle
              @click="deleteList(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
      ></el-pagination>
    </div>

    <!-- 查看组件 -->
    <examine
      :DialogVisibleMod="DialogVisibleExamine"
      :modData="examineData"
      :attributeOrder="searchData"
      @examineDialog="examineDialog"
    ></examine>
  </div>
</template>
<script>
//引入网格布局
import VueGridLayout from "vue-grid-layout";
//引入Toolbar_top组件
import toolbartop from "@/views/components/FLPage/toolbartop";
//引入按钮栏
import buttonhurdle from "@/views/components/FLPage/buttonhurdle";
//引入修改组件
import modificationi from "@/views/components/FLPage/modificationi";
//引入查看组件
import examine from "@/views/components/FLPage/examine";
//引入搜索组件
import searchComponents from "@/views/components/FLPage/searchComponents";
import {
  addFlOrderManagement, //增加
  deleteFlOrderManagement, //删除
  searchFlOrderManagement, //分页查询
  modifyFlOrderManagement, //修改
  getFlOrderManagement, //根据ID获取
  ForTenement, //租户查询
  FBUInative,////编辑组件点击外的事件
} from "@/api/product/flOrderManagementJK/index";
//引入api
import { search } from "api/new20191221/lesseeManagement.js";
export default {
  data() {
    return {
      //搜索框
      suoS: {},
      //瀑布数据
      //   搜索组件的数据
      searchData: [
        {
          EN: "parentName",
          CN: "父租户名",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{1,20}$",
          err: "·长度为1-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "childrenName",
          CN: "子租户名",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{1,20}$",
          err: "·长度为1-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "updateDate",
          CN: "更新时间",
          value: "",
          type: "date",
          option: [],
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "updateBy",
          CN: "更新人",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{1,20}$",
          err: "·长度为1-20!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "createDate",
          CN: "创建时间",
          value: "",
          type: "date",
          option: [],
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "createBy",
          CN: "创建人",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{1,20}$",
          err: "·长度为1-20!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "sysCompanyCode",
          CN: "租户选择",
          value: "",
          type: "radio",
          option: [],
          radio: [], //下面赋值
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: true
        }
      ],
      //添加弹窗的数据模型
      diaDataAdd: {
        yyqName: "",
        pqName: "",
        pqNum: "",
        BH: ""
      },
      // testLayout: [
      //   { x: 0, y: 0, w: 12, h: 15, i: "1" },
      //   { x: 2, y: 7, w: 9, h: 2, i: "2" }
      // ],
      //瀑布流开关
      // switchForLa: {
      //   colNum: 12, //列数
      //   rowHeight: 30, //行高
      //   draggable: false, //可移动/不可移动
      //   resizable: false, //可调整大小/不可调整大小
      //   verticalCompact: true,
      //   margin_s: [10, 10],
      //   useCssTransforms: true
      // },

      //删除----Start----------------------------------------
      deleteDataList: [],
      //删除----End----------------------------------------

      //查看----Start----------------------------------------
      //查看的弹窗控制器
      DialogVisibleExamine: false,
      //查看的数据
      examineData: {},
      //查看----End----------------------------------------

      //表格数据
      //后端传来的数据
      dataAttribute: [],
      //表格选中
      multipleSelection: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0,//总条数
      //
      TD:undefined,//点击编辑和查看保存租户选项
    };
  },
  computed: {
    searchModelData() {
      if (this.searchData) {
        let newARR = JSON.parse(JSON.stringify(this.searchData));
        for (let i = 0; i < newARR.length; i++) {
          if (!newARR[i]["tableSign"]) {
            newARR.splice(i, 1);
          }
          return newARR;
        }
      }
    }
  },
  created() {
    this.forData(this.currentPage, this.pagesize, this.suoS);
    ForTenement().then(response => {
      //查询租户
      console.log("查询租户");
      console.log(response);
      for (let i = 0; i < this.searchData.length; i++) {
        if (this.searchData[i].EN == "sysCompanyCode") {
          this.searchData[i]["radio"] = response.data;
        }
      }
    });
  },
  methods: {
    //搜索
    sunS_F() {
      this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
    },
    //查询组件回调
    searchCallBack(newData) {
      console.log(newData);
      //组装数据（newData是个数组）

      let obj = {};
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value;
      }
      console.log(obj);
      this.suoS = obj;
    },
    //渲染数据初始
    forData(page, size, searchData) {
      search(page, size, searchData).then(response => {
        this.pagetotal = response.data.total;
        this.dataAttribute = response.data.list;
      });
    },

    //添加用户--新增表单组件传来的参数
    toAdd(addData) {
      console.log(addData);
      let obj = {};
      for (let i = 0; i < addData.length; i++) {
        obj[addData[i].EN] = addData[i].value;
      }
      console.log(obj);
      addFlOrderManagement(obj).then(response => {
        this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
      });
    },

    //按钮栏传递了删除命令
    toDelete(orderstring) {
      this.$confirm("确认删除？")
        .then(_ => {
          let idArr = [];
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id);
          }
          if (idArr.length == 0) {
            alert("请选择要删除的数据！");
            return;
          }
          deleteFlOrderManagement(idArr)
            .then(response => {
              this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            })
            .catch(error => {
              alert("删除失败！");
            });
        })
        .catch(_ => {});
    },

    //单项删除
    deleteList(id) {
      console.log(id);
      let arrId = [id];
      this.$confirm("确认删除？")
        .then(_ => {
          deleteFlOrderManagement(arrId).then(response => {
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          });
          done();
        })
        .catch(_ => {});
    },
    //编辑组件点击外的事件
    FBUI(row){
      FBUInative(row.id).then(response=>{
        this.TD=response.data
        console.log('编辑组件点击外的事件')
        console.log(this.TD)
      }).catch(()=>{

      })
      //this.TD=response.data

    },
    //查看
    makeExaId(row) {
      getFlOrderManagement(row.id)
        .then(response => {
          let copyDialog = true;
          this.DialogVisibleExamine = copyDialog;
          // console.log(row);
          this.examineData = row;
          console.log('getFlOrderManagement')
          console.log(response.data)
        })
        .catch(error => {
          alert("获取失败");
        });
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false;
    },

    //修改
    modifyData(value, modData) {
      console.log(value, modData);

      if (value === true) {
        modifyFlOrderManagement(modData.id, modData)
          .then(response => {
            console.log(response);
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          })
          .catch(error => {
            alert("修改失败");
            this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          });
      } else {
        this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
      }
    },

    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //传递删除的参数
      this.deleteDataList = val;
    },

    //分页
    handleSizeChange(val) {
      console.log("每页 " + val + " 条");
      this.forData(this.currentPage, val, this.suoS);
    },
    handleCurrentChange(val) {
      console.log("当前页: " + val);
      this.forData(val, this.pagesize, this.suoS);
    }

    //工具栏组件传来的参数
    // FTableFunction(attributeOrderCloneTwiceL) {
    //   this.attributeOrder = attributeOrderCloneTwiceL;
    // },
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    toolbartop,
    buttonhurdle,
    modificationi,
    examine,
    searchComponents
  }
};
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.right_row {
  border-top: 1px solid #f1f3f4;
  .hunt_sunS_F {
    float: right;
    margin: 10px;
  }
}
</style>
